<template>
	<el-dialog :visible.sync="visible" width="992px" top="0" class="video_preview_wrapper" append-to-body close-on-click-modal>
		<div class="video_preview_player" id="videoPreview"></div>
	</el-dialog>
</template>

<script>
export default {
	props: {
		value: { type: Boolean, default: false },
		src: { type: String, default: '', required: true }
	},
	data() {
		return {
			visible: this.value,
			player: null,
			playerOption: {
				container: '#videoPreview', //容器的ID或className
				plug: 'hls.js', //设置使用hls插件
				volume: 0,
				// live: true,
				autoplay: true,
				video: ''
			}
		};
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) {
				this.player.remove();
				this.player = null;
			} else {
				this.playerOption['video'] = this.src;
				this.$nextTick(() => this.initializePlayer());
			}
		}
	},
	methods: {
		initializePlayer() {
			this.player = new ckplayer(this.playerOption);
			this.$nextTick(() => this.player.play());
		}
	}
};
</script>
<style lang="scss">
.video_preview_wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	.el-dialog {
		position: unset;
		box-shadow: none;
		background-color: transparent;
	}
	.el-dialog__headerbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		top: 40px;
		right: 40px !important;
		width: 40px;
		height: 40px;
		color: #fff;
		font-size: 24px;
		line-height: 40px;
		border-radius: 50%;
		background-color: #606266;
		&:hover,
		&:focus {
			.el-dialog__close {
				color: #fff;
			}
		}
	}
	.el-dialog__header {
		padding: 0 !important;
		border-bottom: none !important;
	}
	.el-dialog__body {
		padding: 0 !important;
	}
}
</style>
<style lang="scss" scoped>
.video_preview_player::v-deep {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background-color: #000;
	overflow: hidden;
	.ckplayer-ckplayer {
		position: absolute;
		top: 0;
		left: 0;
	}
}
</style>
